<template>
    <div>
        <div v-if="!show" class="loading">
            <img src="../assets/images/loading.gif" alt="">
        </div>
        <div v-else class="main">
            <div class="title" :style="backgroundObj"></div>
            <div class="func">
                <div>
                    <span>
                        <img src="../assets/images/comment.png" alt="">
                    </span>
                    <p>111</p> 
                </div>
                <div>
                    <span>
                        <img src="../assets/images/share.png" alt="">
                    </span>
                    <p>1222</p> 
                </div>
                <div>
                    <span>
                        <img src="../assets/images/down.png" alt="">
                    </span>
                    <p>145</p> 
                </div>
                <div>
                    <span>
                        <img src="../assets/images/cellect.png" alt="">
                    </span>
                    <p>1788</p> 
                </div>
            </div>
            <ul class="music-list">
                <li @click="toSong(idx)" v-for="(item, idx) in (load.data)" :key="idx">
                    <div class="num">{{ idx+1 }}</div>
                    <div class="music-msg">
                    <h3>{{ item.name }}</h3>
                    <!-- 再次遍历获取多个歌手的歌名 -->
                    <p v-for="(item2, idx2) in item.ar" :key="idx2">{{ item2.name }}</p>
                    <p> - {{ item.al.name }}</p>
                    </div>
                    <!-- 右侧播放按钮 -->
                    <div class="play">
                    <div class="circle"><span>▲</span></div>
                    </div>
                </li>        
            </ul> 
        </div>
    </div>
</template>

<script>
import { getHotMusic,getHiMusic,getSurgeMusic} from "../assets/api";
export default {
    data() {
        return {
            music_data:[],
            imgUrl:'',
            backgroundObj:{
            'background':null,
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'center',
            'backgroundSize': 'cover',
            },
            //触底加载数据
            load:{
                page:0,
                data:[],
                canRun:true
            },
            show:false,
            count:1
        }
    },
    async created() {
        if(this.$route.query.id == 'hotMusicData'){
            let HotMusicData = await getHotMusic()
            this.music_data = this.$store.state.detailsList.hotMusic  ||  HotMusicData.tracks
            this.imgUrl = this.$store.state.detailsList.hotImg || HotMusicData.coverImgUrl
            this.backgroundObj.background = `url(${this.imgUrl})`
        }else if(this.$route.query.id == 'hiMusicData'){
             let HiMusicData = await getHiMusic()
            this.music_data = this.$store.state.detailsList.hiMusic   ||   HiMusicData.tracks  
            this.imgUrl = this.$store.state.detailsList.hiImg || HiMusicData.coverImgUrl
            this.backgroundObj.background = `url(${this.imgUrl})`
        }else{
             let SurMusicData = await getSurgeMusic()
            this.music_data = this.$store.state.detailsList.surMusic   ||    SurMusicData.tracks
            this.imgUrl = this.$store.state.detailsList.surImg || SurMusicData.coverImgUrl
            this.backgroundObj.background = `url(${this.imgUrl})`
        }
        this.show = true
        this.bottomLoadCal()
    },
    methods: {
        //跳到播放页面
        toSong(idx){
            // console.log(id,idx)
            // 数据传入vuex
            var b = [];
            this.music_data.forEach(item =>{
                var songs = {
                    id: item.id,
                    name: item.name,
                    artists: this.arti(item.ar),
                    picurl: item.al.picUrl
                };
                b.push(songs);
            })

            this.$store.commit("toSongList",b)
            this.$store.commit("songsIdx",idx)

            // 显示音乐控制台
            this.$root.$children[0].$refs.controlers.style.display = "block"
            // console.log(this.$root.$children)
        },
        //处理歌手
        arti(arr) {
            var a = [];
            arr.forEach(item =>{
                a.push(item.name);
            })
            return a;
        },
        //触底加载
        bottomLoadCal() {
            this.load.page = Math.ceil(this.music_data.length / 10.0);
            // console.log(this.load.page, this.music_data.length);
            this.load.data = this.music_data.slice(0, 20);
            document.addEventListener("scroll", () => {
                if (this.load.canRun) {
                this.load.canRun = false;
                    if (this.load.page > 1) {
                        setTimeout(() => {
                            this.load.canRun = true;
                            let scrollT =
                                document.body.scrollTop || document.documentElement.scrollTop;

                            let winH = window.innerHeight;

                            //获取滚动条总长
                            let scrollH =
                                document.body.scrollHeight || document.documentElement.scrollHeight;
                            
                            if (((scrollT + winH) / scrollH).toFixed(2) >= 0.95) {
                                this.bottomLoadGo();
                                this.load.page--;
                                this.count++;
                                // console.log("触底加载了");
                            }
                        }, 500);
                    }
                }
            },true);
        },
        //加载更多数据
        bottomLoadGo() {
            var middle = this.music_data.slice(20*this.count, 20*this.count+20);
            this.load.data = this.load.data.concat(middle);
            // console.log(this.load.data);
        }
    },   
}
</script>

<style lang="scss" scoped>
    @import "../assets/scss/detailsList.scss"
</style>